<template>
  <div class='home-index' ref="homeIndex">
    <div class="navBar">
      <div class="title">
        首页
        <div class="ornamentBox">
          <span class="ornament"></span>
          <span class="ornament"></span>
        </div>
      </div>
      <div class="serachBtn">
        <van-button
          icon="search"
          color="#383838"
          round
          type="primary"
          to="/search"
        />
      </div>
    </div>

    <!-- 音乐 -->
    <music
      :likeMusicObj="userSongList[0]"
    />
    <!-- /音乐 -->

    <!-- 创建的歌单 -->
    <home-song-list
      :homeSongList="createdSongList"
      title="创建的歌单"
    />
    <!-- /创建的歌单 -->

    <!-- 收藏的歌单 -->
    <home-song-list
      :homeSongList="collectionSongList"
      title="收藏的歌单"
    />
    <!-- 收藏的歌单 -->

    <div class="bottom">
      ——— 底线到了 ———
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import music from './components/music'
import homeSongList from '@/components/homeSongList'
import { getUserSongList } from '@/api/user'
import { Button, NavBar } from 'vant'

export default {
  name: 'home',
  components: {
    music,
    homeSongList,
    [Button.name]: Button,
    [NavBar.name]: NavBar
  },
  props: {},
  data () {
    return {
      userSongList: [],
      collectionSongList: [],
      scrollTop: 0
    }
  },
  computed: {
    ...mapState(['loginData']),
    // 用户创建的歌单
    createdSongList: function () {
      return this.userSongList.filter(item => {
        if (item.userId === this.loginData.profile.userId) {
          return item
        } else {
          this.collectionSongList.push(item)
        }
      })
    }
  },
  watch: {},
  created () {
    // 获取用户歌单
    this.loadGetUserSongList()
  },
  mounted () {
    const homeIndex = this.$refs.homeIndex
    homeIndex.onscroll = () => {
      this.scrollTop = homeIndex.scrollTop
    }
  },
  activated () {
    // 将滑动高度赋值为页面跳转前的位置
    this.$refs.homeIndex.scrollTop = this.scrollTop
  },
  methods: {
    // 获取用户歌单的方法
    async loadGetUserSongList () {
      const { data } = await getUserSongList({
        uid: this.loginData.account.id,
        cookie: this.loginData.cookie
      })
      this.userSongList = data.playlist
    }
  }
}
</script>
<style lang='less' scoped>
.home-index {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 50px;
  overflow-y: auto;
  .navBar {
    height: 45px;
    margin: 15px 15px 21px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 22px;
      font-weight: bold;
      .ornamentBox {
        height: 20px;
        display: flex;
        align-items: center;
        .ornament {
          height: 6px;
          width: 16px;
          display: block;
          background-color: #000;
          border-radius: 4px;
          background-color: #E06548;
          margin: 0;
          padding: 0;
        }
        .ornament:last-child {
          width: 6px;
          margin-left: 4px;
          background-color: #A7A7A7;
        }
      }
    }
    .serachBtn {
      height: 70px;
      .van-button--normal {
        padding: 0 0.35rem;
      }
    }
  }
  .bottom {
    line-height: 60px;
    font-size: 13px;
    color: #d6d6d6;
    text-align: center;
  }
}
</style>
